<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<view class="custom-nav">
			<view class="user-info">
				<image class="avatar" src="@/static/avatar.png"></image>
				<view class="balance-info">
					<text class="balance-label">我的收益：</text>
					<text class="balance-amount">{{ userInfo.totalAmout | formatMoney }} 元</text>
				</view>
			</view>
			<view class="withdraw-btn">
				<u-button text="去提现" color="#FF4D8F" shape="circle" size="small" @click="goToWithdraw"></u-button>
			</view>
		</view>
		<!-- 订单号输入区域 -->
		<view class="input-area">
			<u-textarea
				v-model="orderInput"
				placeholder="请填写正确的订单号之后领取补贴"
				height="120"
				count
				:maxlength="500"
			></u-textarea>
		</view>
		
		<!-- 提交按钮 -->
		<view class="submit-btn">
			<u-button text="爆品补" color="#FF3B43" shape="circle" @click="submit()"></u-button>
		</view>
		
		<!-- 用户须知 -->
		<view class="notice-section">
			<view class="notice-title">用户须知</view>
			<view class="notice-content">
				<view class="notice-item">a)成功领取后，对应奖励会充值到您的未提现金额</view>
				<view class="notice-item">b)高峰期提现可能会有延迟，是正常现象，请耐心等待！</view>
			</view>
		</view>
		<!-- 客服悬浮按钮 -->
<!-- 		<view class="customer-service">
			<u-icon name="server-man" size="40" color="#3C9CFF"></u-icon>
			<text class="service-text">在线客服</text>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderInput: '',
				title: '爆品补贴'
			}
		},
		computed: {
			userInfo() {
				return this.$store.getters["common/getUserInfo"]
			}
		},
		filters: {
			formatMoney(val) {
				return val ? Number(val).toFixed(2) : '0.00'
			}
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			getUserInfo() {
				this.request("get", "/order/accountInfo").then(res => {
					this.$store.commit("common/setUserInfo", res.data || {});
					const codeLink = this.getCookie('code')
					console.log("codeLink", codeLink)
					if (codeLink) {
						// 销毁cookie
						this.rmCookie('code')
						location.href = codeLink
					}
				})
			},
			// 去提现页面
			goToWithdraw() {
				uni.navigateTo({
					url: '/pages/account/withdraw'
				});
			},
			submit() {
				const that = this;
				if (!that.orderInput) {
					return that.showMsg("请输入订单号")
				}
				that.request("post", "/app/order/mall/channel/douyinM2schannelOrderList", {
					orderId: that.orderInput
				}).then(res => {
					if (res.code != 0) {
						return that.showMsg(res.msg)
					}
					that.orderInput = ""
					uni.showModal({
						title: "提示",
						content: res.msg || "领取补贴成功",
						showCancel: false,
						success() {
							that.getUserInfo();
							uni.reLaunch({
								url: "/pages/order/order"
							})
						}
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		position: relative;
		min-height: calc(100vh - var(--window-bottom));
		box-sizing: border-box;
		background-color: #f5f5f5;
		padding-bottom: 100rpx;
	}
	
	/* 自定义导航栏样式 */
	.custom-nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		padding-top: calc(var(--status-bar-height) + 30rpx);
		background-color: #ffffff;
		position: sticky;
		top: 0;
		z-index: 100;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	.user-info {
		display: flex;
		align-items: center;
	}
	
	.avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	
	.balance-info {
		display: flex;
		align-items: center;
	}
	
	.balance-label {
		font-size: 28rpx;
		color: #333;
	}
	
	.balance-amount {
		font-size: 28rpx;
		color: #FF4D8F;
		font-weight: bold;
	}
	
	.withdraw-btn {
		width: 160rpx;
	}
	
	
	/* 输入区域样式 */
	.input-area {
		margin: 30rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
	}
	
	/* 提交按钮样式 */
	.submit-btn {
		margin: 30rpx;
	}
	
	/* 用户须知样式 */
	.notice-section {
		margin: 30rpx;
		padding: 30rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
	}
	
	.notice-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	
	.notice-item {
		font-size: 26rpx;
		color: #666;
		line-height: 1.6;
		margin-bottom: 10rpx;
	}
	
	/* 底部使用uniapp原生tabbar，样式在pages.json中配置 */
	
	/* 客服悬浮按钮样式 */
	.customer-service {
		position: fixed;
		right: 30rpx;
		bottom: 150rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #ffffff;
		border-radius: 50%;
		padding: 10rpx;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
	}
	
	.service-text {
		font-size: 20rpx;
		color: #3C9CFF;
	}
</style>